<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../wh2114/vuedemo/lib/vue.js"></script>
    <link rel="stylesheet" href="..wh2114/vuedemo/lib/animate.css" />
    <style>
      .box {
        width: 170px;
        height: 170px;
        background: darkcyan;
      }
      table {
        border: 1px solid #000;
      }
      td {
        border: 1px solid #000;
        padding: 10px;
        text-align: center;
      }
      ul {
        list-style: none;
        display: flex;
        margin: 0;
        padding: 0;
      }
      li {
        width: 200px;
        background: pink;
      }

      .zoom-enter-active {
        animation: zoomInDown 0.9s;
      }

      .zoom-leave-active {
        animation: zoomOutDown 0.9s;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <myhead></myhead>
      <my-user>
        <template v-slot:default="scope"> {{scope.user.phone}} </template>
      </my-user>
      <hr />
      <my-user>
        <template v-slot:default="scope"> {{scope.user.age}} </template>
      </my-user>
      <hr />
      <my-user>
        <template #default="scope"> {{scope.user.birth}} </template>
      </my-user>
      <hr />
      <my-home msg="2114-daydayup" :count="count"></my-home>
      <hr />
      <my-home msg="2114-daydayup" :count="count">
        <div>
          <h2>请让我下课</h2>
          <button>点击下课</button>
        </div>

        <template v-slot:banner>
          <div>
            <h1>banner-1</h1>
            <h1>banner-2</h1>
            <h1>banner-3</h1>
          </div>
        </template>
      </my-home>

      <my-home msg="2114-daydayup" :count="count">
        <div>
          <h2>请让我下课-快点</h2>
          <button>点击下课-快点</button>
        </div>
        <template #banner>
          <div>
            <h1>banner-4</h1>
            <h1>banner-5</h1>
            <h1>banner-6</h1>
          </div>
        </template>
      </my-home>
    </div>

    <template id="myhome">
      <div>
        <h2>Home - HOme - Home</h2>
        <h2>msg -- {{msg}}</h2>
        <h2>count -- {{count}}</h2>
        <hr />
        <div style="width: 40%; height: 120px; border: 1px solid blue">
          <slot>这是匿名插槽 如果没有父给子传递模板内容分发 就先默认这个</slot>
        </div>
        <div style="width: 40%; height: 220px; border: 1px solid red">
          <slot name="banner">这是具名插槽 我这里只接受 banner 内容</slot>
        </div>
        <div style="width: 40%; height: 220px; border: 1px solid yellow">
          <slot name="menu">这是具名插槽 我这里只接受 menu 内容</slot>
        </div>
      </div>
    </template>

    <template id="myuser">
      <div>
        <h2>用户信息展示-user</h2>
        <h2>当前信息: <slot :user="obj">{{ obj.username }}</slot></h2>
      </div>
    </template>

    <script>
      const bus = new Vue(); // 空的Vue 实例对象
      Vue.component("myhead", {
        template: "<h2>wh2114 - 天天大声背面试题目 </h2>",
      });

      Vue.component("myHome", {
        template: "#myhome",
        props: ["msg", "count"],
      });

      Vue.component("my-user", {
        template: "#myuser",
        data() {
          return {
            obj: {
              username: "zuozuomu",
              age: 18,
              birth: "0119",
              phone: "18012341234",
            },
          };
        },
      });

      const vm = new Vue({
        data: {
          title: "Vue component 组件插槽",
          count: 1314520,
        },
        components: {},
        mounted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;
        },
      }).$mount("#app");
    </script>
    <!-- 
        Vue 实现了一套内容分发的 API slot  将 <slot> 元素作为承载分发内容的出口
        插槽  slot 专门接受 从父组件传递来的 (props+slot ) html模板  内容分发 
        
        父组件给子组件传递数据  props 
        父组件 想给子组件 传递 模板(html标签)   用 slot 来接受 内容分发 模块 
        slot 父组件可以把模板标签 动态分发子组件  子组件放到指定的位置区域 (slot 插槽)

        具名插槽 slot  精准投放  定位   name="a"
        template v-slot=  "a"
        name="menu"  v-slot:menu   #menu 

        作用域插槽  把子组件的数据通过插槽传递给父组件 由父组件决定显示什么数据      

        以后封装组件   props 70%  slot 30%
     -->
  </body>
</html>
